<template>
  <div>
    <Header :left="true" leftText="返回" title="并修和抢修争议处理" />
    <div>
      <van-row style="margin-top: 80px">
        <van-col
          ><van-image
            width="40"
            height="30"
            style="margin-left: -10px"
            src="assets/block.png"
        /></van-col>
        <van-col class="message">多媒体信息</van-col>
      </van-row>
    </div>
    <!-- 多媒体信息 -->
    <div class="divMedia">
      <van-row style="margin-top: 10px">
        <van-col
          span="4"
          style="
            font-weight: bold;
            color: #a9a9a9;
            margin-left: 10px;
            margin-top: 8px;
          "
          >视频：</van-col
        >
        <van-col span="14" style="color: #a9a9a9">
          <!-- 循环显示视频 -->
          <div
            v-show="vedioShow"
            v-for="item in vedioList"
            :key="item.id"
            style="margin-left: -10px"
          >
            <van-image
              style="float: left"
              width="50"
              height="40"
              @click="playVedio(item.filePath)"
              src="assets/vedio.png"
            />
          </div>
        </van-col>
      </van-row>
      <van-divider style="margin-top: 0px" />
      <van-row style="margin-top: 10px">
        <van-col
          span="3"
          style="
            font-weight: bold;
            color: #a9a9a9;
            margin-left: 10px;
            margin-top: 8px;
          "
          >照片：</van-col
        >
        <van-col span="14" style="color: #a9a9a9"
          ><van-uploader
            v-show="photoShow"
            v-model="photoList"
            :deletable="false"
            multiple
            :max-count="pictureNum"
        /></van-col>
      </van-row>
      <van-divider style="margin-top: 0px" />
      <van-row style="margin-top: 10px">
        <van-col
          span="4"
          style="
            font-weight: bold;
            color: #a9a9a9;
            margin-left: 10px;
            margin-top: 8px;
          "
          >语音：</van-col
        >
        <van-col span="14" style="color: #a9a9a9">
          <div
            v-show="audioShow"
            @click="playArm"
            style="
              background-color: #00ff33;
              width: 140px;
              height: 35px;
              margin-left: -10px;
            "
          >
            <van-image
              v-show="audioStop"
              width="40"
              height="30"
              style="margin-right: 3px; float: left"
              src="assets/voice.png"
            >
            </van-image>
            <van-loading v-show="audioLoad" style="float: center" color="white"
              ><span style="color: white; font-size: 15px"
                >播放中...</span
              ></van-loading
            >
          </div>
        </van-col>
      </van-row>
    </div>

    <div>
      <!-- 标签 -->
      <van-row style="margin-top: 10px">
        <van-col
          ><van-image
            width="40"
            height="30"
            style="margin-left: -10px"
            src="assets/block.png"
        /></van-col>
        <van-col class="message">维修信息</van-col>
      </van-row>
    </div>
    <!-- 分割线 -->
    <div style="background-color: #f5f5f5; height: 5px"><span></span></div>
    <!-- 数据信息 -->
    <div class="divMessage">
      <!-- <Field
          v-model="form.requestCode"
          :readonly="true"
          size="small"
          style="font-weight:bold;color:#FF7F50;height:40px;"
          center
          colon
          label="报修单号"
        /> 
        <Field
          v-model="form.repairCode"
          :readonly="true"
          size="small"
          style="font-weight:bold;color:#A9A9A9;height:40px;"
          center
          colon
          label="维修单号"
        />
        <Field
          v-model="form.equipName"
          :readonly="true"
          size="small"
          style="font-weight:bold;color:#A9A9A9;height:40px;"
          center
          colon
          label="设备编码"
        />-->
      <Field
        v-model="form.equipName"
        :readonly="true"
        size="small"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="设备编码"
      />
      <Field
        v-model="form.requestUser"
        :readonly="true"
        size="small"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="报修人"
      />
      <Field
        v-model="form.requestTime"
        :readonly="true"
        size="small"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="报修时间"
      />
      <Field
        v-model="form.checkUser"
        :readonly="true"
        size="small"
        style="font-weight: bold; color: #a9a9a9; height: 40px"
        center
        colon
        label="维修人"
      />
      <Field
        v-model="form.enddatetime"
        :readonly="true"
        size="small"
        style="
          font-weight: bold;
          color: #a9a9a9;
          height: 40px;
          white-space: nowrap;
        "
        center
        colon
        label="维修完成时间"
      />
      <!-- <Field size="small" style="font-weight:bold;color:#A9A9A9;height:40px;"
          center colon label="维修类型">
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">抢修</van-radio>
            <van-radio name="2">并修</van-radio>
          </van-radio-group>
        </Field> -->
      <van-row>
        <van-col span="12">
          <Field
            v-model="form.totalmaintenancetime"
            :readonly="true"
            size="small"
            style="
              font-weight: bold;
              color: #a9a9a9;
              height: 40px;
              white-space: nowrap;
            "
            center
            colon
            label="总维修时长"
          />
        </van-col>
        <van-col
          span="10"
          style="
            margin-top: 2%;
            font-size: small;
            font-weight: bold;
            color: black;
            height: 20px;
            white-space: nowrap;
          "
          >分钟</van-col
        >
      </van-row>

      <van-row>
        <van-col span="12">
          <Field
            v-model="form.waitingtime"
            :readonly="true"
            size="small"
            style="
              font-weight: bold;
              color: #a9a9a9;
              height: 40px;
              white-space: nowrap;
            "
            center
            colon
            label="等待时长"
          />
        </van-col>
        <van-col
          span="10"
          style="
            margin-top: 2%;
            font-size: small;
            font-weight: bold;
            color: black;
            height: 20px;
            white-space: nowrap;
          "
          >分钟</van-col
        >
      </van-row>

      <van-row>
        <van-col span="12">
          <Field
            v-model="form.concurrentrepairtime"
            :readonly="true"
            size="small"
            style="
              font-weight: bold;
              color: #a9a9a9;
              height: 40px;
              white-space: nowrap;
            "
            center
            colon
            label="并修时长"
          />
        </van-col>
        <van-col
          span="10"
          style="
            margin-top: 2%;
            font-size: small;
            font-weight: bold;
            color: black;
            height: 20px;
            white-space: nowrap;
          "
          >分钟</van-col
        >
      </van-row>
    </div>

    <van-divider content-position="left">确认并修时长（分钟）</van-divider>
    <van-stepper
      style="margin-left: 15%"
      step="1"
      :decimal-length="0"
      default-value=""
      v-model="form.sureconcurrentrepairtime"
    />

    <van-divider content-position="left">确认抢修时长（分钟）</van-divider>
    <van-stepper
      style="margin-left: 15%"
      step="1"
      :decimal-length="0"
      default-value=""
      v-model="form.rushrepairtime"
    />

    <!-- <div v-show="radiogroup">
        <van-divider content-position="left">并行总时长占比</van-divider>
        <van-radio-group
          style="margin-left: 10%"
          v-model="radio1"
          direction="horizontal"
        >
          <van-radio name="1">1/5</van-radio>
          <van-radio name="2">2/5</van-radio>
          <van-radio name="3">3/5</van-radio>
          <van-radio name="4">4/5</van-radio>
          <van-radio name="5">5/5</van-radio>
        </van-radio-group>
      </div> -->
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <!-- 底部按钮 -->
    <!-- <van-button
      :block="true"
      @click="repairNoPassExecute"
      color="#ed1941"
      class="buttonStart"
      type="primary"
      text="驳回"
    /> -->
    <van-button
      :block="true"
      @click="repairPassExecute"
      cplor="#138087"
      class="buttonStart"
      type="primary"
      text="处理"
    />
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  Loading,
  tab,
  Uploader,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  popup,
  Picker,
  RadioGroup,
  Radio,
  Form,
  Stepper,
} from "vant";
import { _httpClient } from "@/libs/api";
import { storage } from "@/libs/utils";
import {
  removeToken,
  getToken,
  setBaseApiFrefix,
  getBaseApiFrefix,
} from "@/libs/auth";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(tab);
Vue.use(tabs);
Vue.use(Button);
Vue.use(Col);
Vue.use(Row);
Vue.use(Icon);
Vue.use(VanImage);
Vue.use(Divider);
Vue.use(Checkbox);
Vue.use(Pagination);
Vue.use(Panel);
Vue.use(Dialog);
Vue.use(Picker);
Vue.use(popup);
Vue.use(Uploader);
Vue.use(Loading);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Form);
Vue.use(Stepper);
import Header from "@/components/header.vue";
import apicloud from "@/libs/apicloud";
export default {
  components: {
    Divider,
    Button,
    Header,
    Icon,
    CellGroup,
    Cell,
    Field,
    tab,
    tabs,
    Col,
    Row,
    Picker,
    Radio,
    RadioGroup,
    Form,
    Stepper,
  },

  data() {
    return {
      disputesureconcurrentrepairtime: 1,
      value: 1,
      radiogroup: false,
      radio: "1",
      radio1: "1",
      btnLoading: false,
      winName: "", //窗口名
      user: [], //当前登录用户
      //多媒体文件
      photoList: [
        //图片
      ],
      pictureNum: 0, //照片数量
      playing: "播放中...", //语音播放中字幕
      audioLoad: false, // 语音播放中
      audioStop: true, // 语音暂停
      photoShow: false, //照片显示控制
      vedioShow: false, //视频显示控制
      audioShow: false, //语音显示控制
      vedioList: [], //视频
      audioPath: "", //语音

      sourceShowPicker: false,
      allSelected: false,
      selectFont: "一键勾选",
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: "",
      form: {
        atrKey: "", //工厂Key
        eqKey: "", //设备Key
        requestCode: "", //报修单号
        repairCode: "", //维修单编号
        equipId: "设备编码", //设备编码
        equipName: "注塑机", //设备名称
        requestUser: "测试账户", //报修人
        requestTime: "2020-12-03 15:52:00", //报修时间
        exmainUser: "测试账户", //审核人
        exmainTime: "2020-12-03 15:52:00", //审核时间
        executeUser: "测试账户", //执行人
        totalmaintenancetime: "", //总维修时长
        waitingtime: "", //等待时长
        concurrentrepairtime: "", //并修时长
        sureconcurrentrepairtime: "", //确认并修时长
      },
      columns: [{ fault_key: "1", fault_value: "机械故障" }],
    };
  },
  created: function () {
    let oldHight = api.winWidth;
    this.screenWidth = oldHight;

    this.form = api.pageParam.equip;
    //alert(JSON.stringify(this.form));
    this.value = this.form.sureconcurrentrepairtime;
    if (this.form.mergetype == "抢修") {
      this.radio = "1";
      this.radiogroup = false;
    } else {
      this.radio = "2";
      this.radiogroup = true;
    }
    let tkn = getToken();
    if (!tkn) {
      api.openWin({
        name: "login",
        url: "./login-login.html",
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      });
    }
    //页面赋值
    this.form = api.pageParam.equip;
    // alert(this.form.id)
    //初始化查询多媒体信息
    this.queryFileById();
  },
  methods: {
    clstab() {
      //alert(this.radio);
      if (this.radio == 1) {
        this.radiogroup = false;
      } else {
        this.radiogroup = true;
      }
    },
    //视频播放
    playVedio(filePath) {
      let that = this;
      if (
        api.deviceName.toLowerCase() == "vivo" ||
        api.deviceName.toLowerCase() == "oppo" ||
        api.deviceName.toLowerCase() == "honor"
      ) {
        var videoPlayer = api.require("videoPlayer");
        videoPlayer.play(
          {
            path: filePath.trim(),
            autoPlay: true,
          },
          function (ret, err) {}
        );
      } else {
        that.$ac.openVideo({
          url: filePath.trim(),
        });
      }
    },

    //语音播放
    playArm() {
      //判断是播放还是暂停
      if (!this.audioLoad) {
        this.audioLoad = true;
        this.audioStop = false;
        if (this.audioPath == "") {
          Dialog.alert({
            message: "当前无语音信息",
            theme: "round-button",
          }).then(() => {
            // on close
          });
        }
        var audioStreamer = api.require("audioStreamer");
        let _this = this;
        audioStreamer.addEventListener({}, function (ret) {
          if (ret.state == "finished") {
            _this.audioLoad = false;
            _this.audioStop = true;
          }
        });
        audioStreamer.openPlayer(
          {
            path: _this.audioPath,
          },
          function (ret) {
            // if (ret.status) {
            //   api.alert({ msg: JSON.stringify(ret) })
            // }
          }
        );
      } else {
        var audioStreamer = api.require("audioStreamer");
        audioStreamer.pause();
        this.audioLoad = false;
        this.audioStop = true;
      }
    },
    //驳回
    repairNoPass() {
      let _this = this;
      _this.repairNoPassExecute();

      // let _this = this;
      // Dialog.confirm({
      //   title: "提示",
      //   theme: "round-button",
      //   message: "是否确认当前报修单未修理好?",
      // })
      //   .then(() => {
      //     //点击确定，继续执行后续操作
      //     this.repairNoPassExecute();
      //   })
      //   .catch(() => {});
    },

    //处置
    repairPass() {
      let _this = this;
      _this.repairPassExecute();
    },

    //未维修好，执行
    async repairNoPassExecute() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/repair/requestInfo/checkedListzhengyi7",
          {
            body: {
              id: _this.form.id,
              disputesureconcurrentrepairtime:
                _this.form.sureconcurrentrepairtime,
              rushdisputesureconcurrentrepairtime: _this.form.rushrepairtime,
            },
          }
        );
        if (res.code === 200) {
          Toast.clear();
          api.closeWin();
        } else {
          Toast.clear();
          api.closeWin();
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },

    //维修好，执行
    async repairPassExecute() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      //alert(_httpClient.getApiPrefix() + "/app/repair/repairInfo/checkedListzhengyi6");
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/repair/requestInfo/checkedListzhengyi62",
          {
            body: {
              id: _this.form.id,
              disputesureconcurrentrepairtime:
                _this.form.sureconcurrentrepairtime,
              rushdisputesureconcurrentrepairtime:
                _this.form.rushrepairtime,
            },
          }
        );
        if (res.code === 200) {
          Toast.clear();
          api.openWin({
            name: "home",
            url: "./home.html",
            reload: true
          });
        } else {
          Toast.clear();
          api.openWin({
            name: "home",
            url: "./home.html",
            reload: true
          });
        }
      } catch (e) {
        alert(JSON.stringify(e));
        Toast.fail(JSON.stringify(e));
      }
    },
    //查询维修单多媒体信息
    async queryFileById() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() +
            "/app/repair/requestFile/selectRepairFilesnew",
          {
            body: { requestId: _this.form.id },
          }
        );

        if (res.code === 200) {
          Toast.clear();
          if (res.rows.length > 0) {
            //筛选图片、视频、录音
            let pictures = [];
            let vedios = [];
            let audios = [];
            for (let i = 0; i < res.rows.length; i++) {
              if (res.rows[i].fileType == "0") {
                //照片
                let paths = res.rows[i].filePath.split(";");
                for (let j = 0; j < paths.length; j++) {
                  let num = 0;
                  if (paths[j] != "") {
                    let picture = { url: paths[j] };
                    pictures.push(picture);
                    num++;
                  }
                  _this.pictureNum = num;
                }
                //显示照片
                _this.photoShow = true;
              } else if (res.rows[i].fileType == "1") {
                let paths = res.rows[i].filePath.split(";");
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != "") {
                    let vedio = { filePath: paths[j] };
                    _this.vedioList.push(vedio);
                  }
                }
                //视频
                // _this.vedioList.push(res.rows[i])
                _this.vedioShow = true;
              } else if (res.rows[i].fileType == "2") {
                //语音
                let paths = res.rows[i].filePath.split(";");
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != "") {
                    _this.audioPath = paths[j];
                    _this.audioShow = true;
                    break;
                  }
                }
                // if (_this.audioPath == '') {
                //   _this.audioPath = res.rows[i].filePath
                //   _this.audioShow = true
                // }
              }
            }
            _this.photoList = pictures; //照片数组赋值
          }
        } else {
          Toast.fail(res.msg);
        }
      } catch (e) {
        Toast.clear();
        alert(JSON.stringify(e));
      }
    },
  },
};
</script>
<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}

.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 85px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}

.buttonStart {
  position: fixed;
  bottom: 3px;
  left: 10px;
  width: 80%;
  height: 30px;
  background-color:  #1c6c8d;
  border-color:  #1c6c8d;
  font-size: 12px;
}

.buttonEnd {
  position: fixed;
  bottom: 3px;
  right: 5px;
  width: 45%;
  height: 30px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
  font-size: 12px;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}

.divStyle {
  border: 1px solid #dcdcdc;
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 5px;
  margin-right: 4px;
  margin-top: 4px;
}

.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}

.divMedia {
  margin-top: 0px;
  height: 230px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.divMessage {
  margin-top: 0px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
</style>
